<template>
<div class="main">
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick" v-show="wen">
    <el-tab-pane label="发布文章" name="first">
      <div>
        <Dispatch :formData="formData" ></Dispatch>
        <div class="tipbox">
            <h4><strong>注 意 事 项</strong></h4>
            <p>1、文章内容必须属于合法内容，如有负面、涉政、敏感等一律不予发布并停止账号使用。</p>
            <p>2、文章提交发布后不可修改、取消或删除，请在提交之前确认好文章内容。</p>
            <p>3、一篇文章的发布时间为1-36小时以内，平均大约花费6小时。稿件时效默认为1个月,如有备注以媒体备注为准。</p>
            <p>4、审稿时间为：周一至周五 09:00-18:00，下午16点后提交的文章在隔天发布。</p>
            <p>5、所选媒体可能会因为审稿不达标，导致个别所选媒体不能发布，届时会建议您更换媒体或退款。</p>
            <p>6、不能带网址的一律不能带电话、QQ、微信等信息，百度新闻源根据文章质量不保证100%收录。</p>
            <p>7、文章标题22字以内，内容500~2500字内，图片0~3张内，图片宽度500像素内，媒体可能会对文章进行适当的调整。</p>
            <p>8、文章中包含的网址、电话、图片过大、图片过多等，媒体会根据内容规范进行调整或者删减，属于正常情况。</p>
            <p>9、word文档上传之后请仔细检查，是否与编辑器内显示一致，请确认一致后再继续操作。</p>
            <p>10、包收录的媒体，若稿件未收录，请在第二个工作日提交反馈，有特殊要求的媒体请按照媒体备注操作（例：周五出的稿件，在周六日非正常工作日的情况下，最晚周一下班前反馈未收录）</p>
            <p>11、稿件发布频道不保证，编辑根据稿件内容安排频道</p>
            <p>12、所有成功发布的稿件，除了发布在手机端媒体资源的专稿，其他稿件一律不保证手机端可以打开。</p>
        </div>
        <div id="footer_box" style="left: 243px;">
          <span class="money_wrapper">已选媒体： 0&nbsp;个，金额：0元（账户余额：358.00 元 ）</span>
          <div class="am-btn-group">
            <el-button type="primary" @click="show('wen')">下一步</el-button>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="发布代写" name="second">
      <el-form :model="formData" label-width="100px" class="demo-ruleForm formm">
        <el-form-item label="文章标题:">
          <el-input
            v-model="formData.name"
            placeholder="给点标题提示吧！"
            class="title"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="推广对象:">
          <el-input
            v-model="formData.name"
            placeholder="推广的产品或者公司名称"
            class="title"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="文章体裁:">
          <el-select v-model="formData.ruleForm.value" placeholder="请选择"  class="title" >
            <el-option
              v-for="item in formData.ruleForm.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宣传要点:">
          <el-input
            v-model="formData.name"
            placeholder="此次推广的重点"
            class="title"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="其他要求:">
          <el-input
            v-model="formData.name"
            placeholder="如：最晚出稿时间"
            class="title"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="软文案例链接:">
          <el-input
            v-model="formData.name"
            placeholder="功写手参考的文章地址"
            class="title"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="附件地址:">
          <el-input
            v-model="formData.name"
            placeholder="图片资料，可填网盘地址"
            class="title"
          >
          </el-input>
        </el-form-item>
        <el-button type="primary" class="xia" @click="show('ghostwrite')">下一步</el-button>

      </el-form>
    </el-tab-pane>
    <el-tab-pane label="发布自媒体" name="third">
      <Dispatch :formData="formData" ></Dispatch>
      <div class="tipbox">
          <h4><strong>注 意 事 项</strong></h4>
          <p>1、文章内容必须属于合法内容，如有负面、涉政、敏感等一律不予发布并停止账号使用。</p>
          <p>2、文章提交发布后不可修改、取消或删除，请在提交之前确认好文章内容。</p>
          <p>3、一篇文章的发布时间为1-36小时以内，平均大约花费6小时。稿件时效默认为1个月,如有备注以媒体备注为准。</p>
          <p>4、所选媒体可能会因为审稿不达标，导致所选媒体不能发布，届时会在后台拒稿款项直接返回到账户。</p>
          <p>5、根据自媒体平台规则文章中一律不能带电话、QQ、微信等联系方式，文章发出后都不保证被百度等搜索引擎收录。</p>
          <p>6、文章标题建议30字以内，内容500~2500字内，图片0~3张内，图片宽度500像素内，这样可增加出稿率。</p>
          <p>7、文章中包含的网址、电话、图片过大、图片过多等，媒体会根据内容规范进行调整或者删减，属于正常情况。</p>
          <p>8、word文档上传之后请仔细检查，是否与编辑器内显示一致，请确认一致后再继续操作。</p>
          <p>9、稿件发布频道不保证，平台系统根据稿件内容安排频道。</p>
          <p>10、个别自媒体平台会自动识别相同文章导致审核不通过，所以同一篇文章，最好不要提交同一个自媒体平台（比如百家号）。</p>
      </div>
      <div id="footer_box" style="left: 243px;">
        <span class="money_wrapper">已选媒体： 0&nbsp;个，金额：0元（账户余额：358.00 元 ）</span>
        <div class="am-btn-group">
          <el-button type="primary" @click="show('media')">下一步</el-button>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
  <Wen v-show="wenMedia" :title="title" ></Wen>
  <div id="footer_box" style="left: 243px;" v-show="wenMedia">
    <span class="money_wrapper">已选媒体： 0&nbsp;个，金额：0元（账户余额：358.00 元 ）</span>
    <div class="am-btn-group">
      <el-button type="primary" @click="hide">上一步</el-button>
      <el-button type="primary" size="small">提 交</el-button>
    </div>
  </div>
  <Ghostwrite v-show="ghostwrite" :title="title" ></Ghostwrite>
  <div id="footer_box" style="left: 243px;" v-show="ghostwrite">
    <span class="money_wrapper">已选媒体： 0&nbsp;个，金额：0元（账户余额：358.00 元 ）</span>
    <div class="am-btn-group">
      <el-button type="primary" @click="hide">上一步</el-button>
      <el-button type="primary" size="small">提 交</el-button>
    </div>
  </div>
  <Media v-show="mediaMedia" :title="title"></Media>
  <div id="footer_box" style="left: 243px;" v-show="mediaMedia">
    <span class="money_wrapper">已选媒体： 0&nbsp;个，金额：0元（账户余额：358.00 元 ）</span>
    <div class="am-btn-group">
      <el-button type="primary" @click="hide">上一步</el-button>
      <el-button type="primary" size="small">提 交</el-button>
    </div>
  </div>
</div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import Dispatch from '@/components/article/dispatch.vue'
import Wen from '@/components/article/wen.vue'
import Media from '@/components/article/media.vue'
import Ghostwrite from '@/components/article/ghostwrite.vue'
export default {
  components: {
      Dispatch,
      Wen,
      Media,
      Ghostwrite
  },
  data() {
    return {
      activeName: 'first',
      value1: '',
      text: '',
      content:'',
      formData:{
        name:"",
        ruleForm:{},
        fileList:[],
        editorOption:{},
      },
      wenMedia:false,
      mediaMedia:false,
      wen:true,
      ghostwrite:false,
      title:''
    };

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    show(e){
      if(e=="wen"){
        this.wenMedia=true
        this.wen=false
        this.title="发布文章"
      }else if(e=="ghostwrite"){
        this.ghostwrite=true
        this.wen=false
        this.title="代写发布"
      }else if(e=="media"){
        this.mediaMedia=true
        this.wen=false
        this.title="发布自媒体"
      }
    },
    hide(){
      this.wenMedia=false
      this.mediaMedia=false
      this.ghostwrite=false
      this.wen=true
    }
  }
};
</script>

<style lang="scss" scoped>
.tips{
  color: orangered;
  margin-left: 26px;
}
.title{
    width: 341px;
    input{
      width: 341px;
    }
}
.formm{
  margin: 41px;
}
.formt{
  border-bottom: 1px #dedede solid;
  padding-bottom: 35px;
}

.tipbox {
    background: #e5f3ff;
    border: 1px solid #c0dffa;
    border-radius: 6px;
    padding: 2px 15px;
    line-height: 26px;
    font-size: 13px;
    margin: 44px 60px 88px 60px;
    h4{
      font-size: 15px;
      margin-bottom: 10px;
    }
}
.main{
  min-width: 1200px;
}
.xia{
  margin-left: 100px;
}
#footer_box {
    z-index: 999;
    position: fixed;
    left: 243px;
    bottom: 0;
    height: auto;
    border-top: 1px solid #26A7E0;
    padding: 10px;
    background: #4795C5;
    color: #fff;
    width: 100%;
    font-size: 14px;
    padding-top: 27px;
    margin-left: 6px;
    padding-left: 441px;
    .am-btn-group,
    .am-btn-group-stacked {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }
    .el-button--primary {
        background: #ea6e0c;
        margin-left: 11px;
    }
}

</style>
